<template>
	<div class="addMaintainPlan zy-content">
		<back-level :goPage="back" />
		<Card :title="`${!editId ? `${$t('maintenance.NewPlan')}` : `${$t('maintenance.EditPlan')}`}`" class="detail-content-layout">
			<div class="line-title">
				<Steps :current="current" class="steps">
					<Step :title="`${$t('maintenance.choseItem')}`"></Step>
					<Step :title="`${$t('maintenance.addmaintenance')}`"></Step>
					<Step :title="`${$t('maintenance.newTime')}`"></Step>
				</Steps>
			</div>
			<!-- 第一步 -->
			<div class="searchBox" v-if="current === 0">
				<Form class="search-form" ref="stepOneValidate" :rules="stepOneRuleValidate" :model="formInline">
					<div class="labelTop">
						<FormItem :label="`${$t('maintenance.plan')}`" class="item" prop="planName">
							<Input
								type="text"
								v-model="formInline.planName"
								@on-change="planNamechange"
								:placeholder="`${$t('common.inputInfo')}`"
								clearable
								class="inputBorder"
								:maxlength="100"
							></Input>
						</FormItem>
					</div>
				</Form>
				<div class="addDev" @click="addDev">
					<Icon type="md-add-circle" size="20" />
					添加模具
				</div>
				<div class="tableContent">
					<Table border height="500" class="resizable-table" @on-column-width-resize="onColumnWidthResize" :columns="columns" :data="data">
						<template slot-scope="{ row }" slot="action">
							<span class="operationBtn" @click="deleteDevRow(row)">{{ $t('common.Delete') }}</span>
						</template>
					</Table>
				</div>
				<Modal :mask-closable="false" v-model="addDevVisible" title="添加模具" width="1400" class="addDevModal modal-content-layout">
					<Form class="search-form" label-position="top">
						<div class="label">
							<FormItem label="功能位置" class="item mr16">
								<Cascader
									clearable
									:data="orgList"
									@on-change="handleCasChangeOne"
									v-model="searchParams.functionalLocationName"
									:placeholder="`${$t('common.selectInfo')}`"
									change-on-select
								></Cascader>
							</FormItem>
							<FormItem label="模具编号" class="item mr16">
								<Input
									type="text"
									v-model="searchParams.moldCode"
									:placeholder="`${$t('common.inputInfo')}`"
									class="inputBorder"
									:maxlength="32"
								></Input>
							</FormItem>
							<FormItem label="模具名称" class="item mr16">
								<Input
									type="text"
									v-model="searchParams.moldName"
									:placeholder="`${$t('common.inputInfo')}`"
									class="inputBorder"
									:maxlength="32"
								></Input>
							</FormItem>
							<FormItem label="" class="item">
								<Button style="position: relative; top: 11px" class="ivu-btn-lg" type="primary" @click="changeNum">
									{{ $t('common.Query') }}
								</Button>
							</FormItem>
						</div>
					</Form>
					<div>
						<!-- {{ addDevdata }} -->
						<Table
							border
							class="resizable-table"
							@on-column-width-resize="onColumnWidthResize"
							ref="devSelection"
							height="500"
							:columns="addDevcolumns"
							:data="addDevdata"
							@on-selection-change="handleSelectionChange"
						></Table>
						<div class="pageWrap mt16">
							<pageLeftTitle :total="addDevpageParams.total" :selected="selectData.length" />
							<Page
								:total="addDevpageParams.total"
								:page-size="addDevpageParams.pageSize"
								:page-size-opts="addDevpageParams.pageSizeOption"
								:current="addDevpageParams.pageNum"
								@on-change="changePageNum"
								@on-page-size-change="changePageSize"
								show-sizer
								show-total
							/>
						</div>
					</div>
					<div slot="footer">
						<Button type="default" @click="addDevCancel">{{ $t('common.Cancle') }}</Button>
						<Button type="primary" @click="addDevOk">{{ $t('maintenance.Confirmed') }}</Button>
					</div>
				</Modal>
			</div>
			<!-- 第二步 -->
			<div v-if="current === 1" class="third searchBox" key="2">
				<Form class="search-form" ref="step2Validate" :model="formInline">
					<div class="labelTop">
						<!-- {{ formInline.servicingLevel }} -->
						<FormItem
							label="保养等级"
							class="item"
							prop="servicingLevel"
							:rules="{ required: true, message: '请选择保养等级', trigger: 'change', type: 'number' }"
						>
							<Select v-model="formInline.servicingLevel" clearable :placeholder="`${$t('common.selectInfo')}`">
								<Option :value="1" label="一级保养"></Option>
								<Option :value="2" label="二级保养"></Option>
								<Option :value="3" label="三级保养"></Option>
							</Select>
						</FormItem>
					</div>
				</Form>
				<div class="addPlan" @click="addPlan">
					<Icon type="md-add-circle" size="20" />
					{{ $t('maintenance.addmaintenance') }}
				</div>
				<div class="tableContent">
					<Table
						border
						class="resizable-table"
						@on-column-width-resize="onColumnWidthResize"
						ref="selection"
						height="500"
						:columns="contentColumns"
						:data="contentData"
					>
						<template slot-scope="{ row }" slot="action">
							<!-- <span class="operationBtn" @click="seeDetail(row)">{{ $t('common.Detail') }}</span> -->
							<span class="operationBtn" @click="deleteRow(row)">{{ $t('common.Delete') }}</span>
						</template>
					</Table>
				</div>
				<Modal :mask-closable="false" v-model="visible" :title="`${$t('common.Detail')}`" class="checkContentModal" width="1200" footer-hide>
					<contentDetail :formInline="formInline" :materData="materData" :planToolList="toolList"></contentDetail>
				</Modal>
			</div>

			<!-- 第三步 -->
			<div v-if="current === 2" class="second" key="stepTwoValidate">
				<!-- {{ formInline }} -->
				<Form class="search-form" style="width: 100%" ref="stepTwoValidate" :rules="ruleValidate" :model="formInline">
					<Row :gutter="24">
						<Col span="12">
							<FormItem label="保养等级" class="item" prop="servicingLevel">
								<Select v-model="formInline.servicingLevel" :disabled="true" :placeholder="`${$t('common.selectInfo')}`">
									<Option :value="1" label="一级保养"></Option>
									<Option :value="2" label="二级保养"></Option>
									<Option :value="3" label="三级保养"></Option>
								</Select>
							</FormItem>
						</Col>
						<Col span="12">
							<FormItem label="触发条件" prop="triggerCondition">
								<Input v-model="formInline.triggerCondition" disabled> </Input>
							</FormItem>
						</Col>
					</Row>

					<Row :gutter="24">
						<Col span="6" v-if="formInline.servicingLevel != 1">
							<FormItem label="上限值" class="item" prop="maxVal">
								<InputNumber style="width: 100%" v-model="formInline.maxVal" :placeholder="`${$t('common.inputInfo')}`"> </InputNumber>
							</FormItem>
						</Col>
						<Col span="6" v-if="formInline.servicingLevel != 1">
							<!-- :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" 
            :parser="value => value.replace(/k\￥\s?|(,*)/g, '')"
            -->
							<FormItem label="下限值" class="item" prop="minVal">
								<InputNumber style="width: 100%" v-model="formInline.minVal" :placeholder="`${$t('common.inputInfo')}`"> </InputNumber>
							</FormItem>
						</Col>
						<Col span="12">
							<FormItem label="首次生成时间" class="item" prop="firstTime">
								<DatePicker
									type="datetime"
									format="yyyy-MM-dd HH:mm:ss"
									:options="options"
									:placeholder="`${$t('common.selectInfo')}`"
									:value="formInline.firstTime"
									@on-change="
										(val) => {
											formInline.firstTime = val;
										}
									"
								>
								</DatePicker>
							</FormItem>
						</Col>
					</Row>

					<Row :gutter="24">
						<Col span="12">
							<FormItem label="计划截止时间" class="item" prop="planEndTime">
								<DatePicker
									type="datetime"
									format="yyyy-MM-dd HH:mm:ss"
									:options="options"
									@on-change="
										(val) => {
											formInline.planEndTime = val;
										}
									"
									:placeholder="`${$t('common.selectInfo')}`"
									:value="formInline.planEndTime"
								></DatePicker>
							</FormItem>
						</Col>
						<Col span="12">
							<FormItem label="标准工时(min)" prop="unitTime">
								<InputNumber style="width: 100%" disabled :min="0" v-model="formInline.unitTime" :placeholder="`${$t('common.inputInfo')}`">
								</InputNumber>
							</FormItem>
						</Col>
					</Row>
					<Row :gutter="24" class="mt16">
						<Col span="12">
							<FormItem
								label="任务存活时间"
								class="item"
								prop="taskDays"
								:rules="{ required: true, message: '请输入任务存活时间', trigger: 'change', type: 'number' }"
							>
								<InputNumber style="width: 70%" :min="0" v-model="formInline.taskDays" :placeholder="`${$t('common.inputInfo')}`"> </InputNumber>
								<span style="margin-left: 10px">天</span>
							</FormItem>
						</Col>
						<Col span="12">
							<FormItem label="" class="item" prop="taskHours" :rules="{ required: true, message: '请输入', trigger: 'change', type: 'number' }">
								<InputNumber style="width: 90%" :min="0" v-model="formInline.taskHours" :placeholder="`${$t('common.inputInfo')}`"> </InputNumber>
								<span style="margin-left: 10px">小时</span>
							</FormItem>
						</Col>
					</Row>

					<Row :gutter="24" class="mt16">
						<Col span="12">
							<FormItem :label="`${$t('maintenance.zhuConfirmed')}`" class="item" prop="isConfirm">
								<RadioGroup v-model="formInline.isConfirm">
									<Radio :label="1">{{ $t('common.Yes') }}</Radio>
									<Radio :label="0">{{ $t('common.No') }}</Radio>
								</RadioGroup>
							</FormItem>
						</Col>
						<Col span="12">
							<FormItem :label="$t('是否自动分配')" class="item">
								<RadioGroup v-model="formInline.autoDistribution">
									<Radio :label="1">{{ $t('common.Yes') }}</Radio>
									<Radio :label="0">{{ $t('common.No') }}</Radio>
								</RadioGroup>
							</FormItem>
						</Col>
					</Row>
				</Form>
			</div>

			<div class="nextBtn">
				<!-- {{ current }} -->
				<Button @click="previous" v-if="current !== 0">{{ $t('common.Pre') }}</Button>
				<Button type="primary" @click="next" v-if="current !== 2">{{ $t('common.Next') }}</Button>
				<Button type="primary" :loading="loading" @click="create" v-if="current === 2">
					{{ $t('common.Creatingsuccessful') }}
				</Button>
			</div>
		</Card>

		<Drawer :title="`${$t('maintenance.addmaintenance')}`" :styles="styles" :scrollable="true" v-model="drawerVisible" width="1200" class="drawer">
			<div class="search">
				<Col span="24">
					<Row>
						<Col span="6" style="padding: 0 5px">
							<label>{{ $t('maintenance.MaintenanceItem') }}</label>
							<Input v-model="searchPlanParams.itemProject" clearable />
						</Col>
						<!-- <Col span="6" style="padding: 0 5px">
          <label>{{ $t('设备等级') }}</label>
          <Select v-model="searchPlanParams.categoryName" filterable @on-change="categorySelectChange" clearable
            :placeholder="`${$t('common.selectInfo')}`" class="select">
            <Option v-for="v in category" :value="v.value" :key="v.value" :label="v.label">
            </Option>
          </Select>
          </Col> -->
						<!-- <Col span="6" style="padding: 0 5px">
          <label>{{ $t('设备类别') }}</label>
          <Select v-model="searchPlanParams.deviceType" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
            <Option v-for="(item, index) of deviceTypeList" :value="item.value" :key="index" :label="item.value" />
          </Select>
          </Col> -->
						<Col span="6" style="padding: 0 5px">
							<label>{{ $t('保养级别') }}</label>
							<Select v-model="searchPlanParams.itemLevel" clearable :placeholder="`${$t('common.selectInfo')}`">
								<Option v-for="item of levelList" :value="item.key" :key="item.key" :label="item.name"> </Option>
							</Select>
						</Col>
						<Col span="6">
							<Button type="primary" class="ivu-btn-lg" @click="changePlanNum">{{ $t('common.Query') }}</Button>
						</Col>
					</Row>
				</Col>
				<Col span="24" style="padding-top: 10px">
					<!-- <Row>
          <div style="display: flex; align-items: center; justify-content: flex-start;">
            <Col span="6" style="padding: 0 5px">
            <label>{{ $t('保养周期') }}</label>
            <Select v-model="searchPlanParams.triggerCycle" filterable clearable
              :placeholder="`${$t('common.selectInfo')}`">
              <Option v-for="(item, index) of cycle" :value="item.key" :key="index" :label="item.name">
              </Option>
            </Select>
            </Col>
            <Col span="6" style="padding: 0 5px">
            <label>{{ $t('保养位置') }}</label>
            <Select filterable clearable class="select" v-model="searchPlanParams.bomId"
              :placeholder="`${$t('common.selectInfo')}`" @on-change="materielNoChangeBom"
              :remote-method="materielNoChange">
              <Option v-for="item in materielNoList" :value="item.id" :label="item.materielNo + '-' + item.materielName"
                :key="item.id" />
            </Select>
            </Col>

            <Col span="6" style="padding: 0 5px">
            <label>{{ $t('安装位置') }}</label>
            <Cascader :data="orgList" :transfer="true" v-model="orgCodeList" change-on-select
              @on-change="handleCasChange" />
            </Col>

            <Col span="6" style="padding: 0 5px">
            <label>{{ $t('equipCheck.SerialNo') }}</label>
            <Select v-model="searchPlanParams.deviceMId" filterable clearable
              :placeholder="`${$t('common.inputInfo')}${$t('equipCheck.SerialNo')}`" :remote-method="handleRemote">
              <Option v-for="item in deviceMIdList" :value="item.deviceMId" :label="item.desc" :key="item.deviceMId" />
            </Select>
            </Col>
          </div>
        </Row> -->
				</Col>
				<!-- <Col span="24" style="padding-top: 10px; display: flex; justify-content: center">
					<Button type="primary" class="ivu-btn-lg" @click="changePlanNum">{{ $t('common.Query') }}</Button>
				</Col> -->
			</div>
			<div class="tableContent" style="margin: 10px">
				<Table
					border
					class="resizable-table"
					@on-column-width-resize="onColumnWidthResize"
					ref="drawerSelection"
					height="500"
					:columns="drawerColumns"
					:data="drawerData"
					@on-selection-change="handleDrawerChange"
				></Table>
			</div>
			<div class="demo-drawer-footer">
				<Page
					:total="drawerTotal"
					:page-size="drawerpageSize"
					:page-size-opts="$variable.pageSizes"
					:current="drawerpageNum"
					@on-change="drawerchangePageNum"
					@on-page-size-change="drawerchangePageSize"
					show-sizer
					show-total
				/>

				<div>
					<Button class="ivu-btn-lg" style="margin-right: 8px" @click="handleDrawerCancel">{{ $t('common.Cancle') }} </Button>
					<Button class="ivu-btn-lg" type="primary" @click="handleDrawerOk">{{ $t('maintenance.Confirmed') }}</Button>
				</div>
			</div>
		</Drawer>
		<signle-common-modal ref="signleCommonModal" @handleRefresh="handleRefresh" />
	</div>
</template>

<script>
import recursion from '@/util/recursion';
import contentDetail from './contentDetail.vue';
// import util from '@/util/util'
import { mapGetters } from 'vuex';
import toggleTableOperation from '@/mixins/toggleTableOperation';
import signleCommonModal from '@/views/devScene/repair/modules/signleCommonModal';
export default {
	name: 'addMaintainPlan',
	mixins: [toggleTableOperation],
	components: {
		contentDetail,
		signleCommonModal,
	},
	props: ['mainDevice', 'factoryList', 'planPositionList', 'planClassifyList', 'editId'],
	data() {
		return {
			customCacheKey: 'addMaintainPlanStep1',
			drawerTotal: 0,
			drawerpageSize: 10,
			drawerpageNum: 1,
			pageSizeOption: [10, 20, 30, 40],
			deviceMIdList: [],
			selectData: [],
			current: 0,
			visible: false,
			drawerVisible: false,
			loading: false,
			addDevVisible: false,
			disabledMinutes: [0, 10, 20],
			searchParams: {},
			searchPlanParams: {},
			styles: {
				height: 'calc(100% - 55px)',
				overflow: 'scroll',
				paddingBottom: '53px',
				position: 'static',
			},
			formInline: {
				categoryName: '',
				planName: '',
				firstTime: this.$moment(new Date()).format('YYYY-MM-DD HH:00:00'),
				planEndTime: this.$moment(new Date()).format('YYYY-MM-DD HH:00:00'),
				isConfirm: 0,
				taskDays: null,
				maxVal: 10,
				minVal: 1,
				autoDistribution: 0,
				taskHours: 0,
			},
			stepOneRuleValidate: {
				categoryName: [{ required: true, message: '请选择设备类别', trigger: 'change' }],
				planName: [{ required: true, message: '请输入保养计划', trigger: 'blur' }],
			},
			stepTwoValidate: {
				maintainType: '',
				intervalRate: null,
				triggerCycle: '',
			},
			options: {
				// disabledDate (date) {
				//   return date && date.valueOf() < Date.now() - 86400000;
				// }
			},
			options1: {
				disabledDate: (date) => {
					let data = this.stepTwoValidate.firstTime ? this.stepTwoValidate.firstTime : '';
					return date && date.valueOf() <= new Date(data).valueOf();
				},
			},
			ruleValidate: {
				maintainType: [{ required: true, message: '请输入保养方式', trigger: 'change' }],
				intervalRate: [{ required: true, type: 'number', message: '请输入间隔', trigger: 'blur' }],
				triggerCycle: [{ required: true, message: '请选择周期', trigger: 'change' }],
				itemLevel: [{ required: true, message: '请选择保养级别' }],
				isConfirm: [{ required: true, message: '请选择是否需要' }],
				firstTime: [{ required: true, message: '请选择日期' }],
				planEndTime: [{ required: true, message: '请选择日期' }],
				day: [{ required: true, type: 'number', message: '请输入天数', trigger: 'blur' }],
				hour: [{ required: true, type: 'number', message: '请输入小时', trigger: 'blur' }],
				maxVal: [{ required: true, message: '请输入上限值', trigger: 'change', type: 'number' }],
				minVal: [{ required: true, message: '请输入上限值', trigger: 'change', type: 'number' }],
			},
			columns: [
				// { type: "selection", width: 60, align: "center" },
				{
					type: 'index',
					width: 80,
					title: `${this.$t('common.index')}`,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '模具名称',
					key: 'moldName',
					align: 'center',
					minWidth: 100,
					tooltip: true,
					resizable: true,
				},
				{
					title: '模具编号',
					key: 'moldCode',
					align: 'center',
					minWidth: 100,
					resizable: true,
					tooltip: true,
				},
				{
					title: '模具型号',
					key: 'moldModel',
					align: 'center',
					minWidth: 100,
					resizable: true,
					tooltip: true,
				},
				{
					title: '功能位置',
					key: 'functionLocation',
					align: 'center',
					minWidth: 100,
					tooltip: true,
					resizable: true,
				},
				{
					title: `${this.$t('common.operation')}`,
					slot: 'action',
					align: 'center',
					minWidth: 100,
				},
			],
			addDevcolumns: [
				{
					type: 'selection',
					width: 60,
					align: 'center',
				},
				{
					title: '模具名称',
					key: 'moldName',
					align: 'center',
					minWidth: 100,
					tooltip: true,
					resizable: true,
				},
				{
					title: '模具编号',
					key: 'moldCode',
					align: 'center',
					minWidth: 100,
					tooltip: true,
					resizable: true,
				},
				{
					title: '模具型号',
					key: 'moldModel',
					align: 'center',
					minWidth: 100,
					tooltip: true,
					resizable: true,
				},
				{
					title: '功能位置',
					key: 'functionLocation',
					align: 'center',
					minWidth: 100,
					tooltip: true,
					resizable: true,
				},
			],
			addDevdata: [],
			data: [],
			confirmedName: '',
			confirmedBy: '',
			materialList: {},
			toolList: [],
			materData: [],
			drawerSelectionData: [],
			// category: this.mainDevice,
			category: [
				{ label: 'A', value: 'A' },
				{ label: 'B', value: 'B' },
				{ label: 'C', value: 'C' },
			],
			companyList: this.factoryList,
			position: this.planPositionList,
			classification: this.planClassifyList,
			levelList: [
				{ name: '一级保养', key: 1 },
				{ name: '二级保养', key: 2 },
				{ name: '三级保养', key: 3 },
			],
			cycleInfo: [
				{ name: '定期保养', key: '1' },
				{ name: '计时保养', key: '3' },
			],
			cycle: [
				{ name: '小时', key: '8' },
				{ name: '班次', key: '7' },
				{ name: '日', key: '1' },
				{ name: '周', key: '2' },
				{ name: '月', key: '3' },
				{ name: '季度', key: '4' },
				{ name: '半年', key: '5' },
				{ name: '年', key: '6' },
			],

			pageParams: {
				total: 64,
				pageSize: 10,
				pageNum: 1,
				pageSizeOption: [10, 20, 30, 40],
			},
			addDevpageParams: {
				total: 0,
				pageSize: 10,
				pageNum: 1,
				pageSizeOption: [10, 50, 100, 200,500],
			},
			contentColumns: [
				{
					type: 'index',
					width: 80,
					title: `${this.$t('common.index')}`,
					align: 'center',
				},
				// {
				//   title: `${this.$t('maintenance.Level')}`,
				//   key: 'itemLevelName',
				//   align: 'center',
				//   minWidth: 100,
				//   tooltip: true,
				//   render: (h, params) => {
				//     return h('div', [
				//       h('span', {}, this.levelList.find(val => val.key === params.row.itemLevel).name)
				//     ])
				//   },
				//   resizable: true, tooltip: true,
				// },
				{
					title: '保养项目',
					key: 'itemProject',
					align: 'center',
					minWidth: 100,
					tooltip: true,
					resizable: true,
				},
				{
					title: '基准',
					key: 'itemBase',
					align: 'center',
					minWidth: 100,
					tooltip: true,
					resizable: true,
				},
				{
					title: `方法`,
					key: 'itemMethod',
					align: 'center',
					minWidth: 100,
					tooltip: true,
					resizable: true,
				},
				{
					title: `${this.$t('common.operation')}`,
					slot: 'action',
					minWidth: 200,
					align: 'center',
				},
			],
			contentData: [],
			drawerColumns: [
				{
					type: 'selection',
					align: 'center',
					width: 60,
				},
				{
					title: '保养项目',
					key: 'itemProject',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '保养级别',
					key: 'itemLevel',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
					render: (h, params) => {
						return h('div', [
							h('span', {}, this.levelList.find(val => val.key == params.row.itemLevel).name),
						]);
					},
				},
				{
					title: '基准',
					key: 'itemBase',
					minWidth: 180,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '方法',
					key: 'itemMethod',
					align: 'center',
					minWidth: 100,
					resizable: true,
					tooltip: true,
				},
				{
					title: '标准工时（S）',
					key: 'unitTime',
					align: 'center',
					minWidth: 160,
					resizable: true,
					tooltip: true,
				},
				{
					title: '需求人数',
					key: 'personQty',
					minWidth: 130,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				// {
				//   title: '模具编号',
				//   key: "mmoldCode",
				//   minWidth: 160,
				//   align: "center",
				//   resizable: true,
				// },
				// {
				//   title: '模具等级',
				//   key: "moldGrade",
				//   minWidth: 160,
				//   align: "center",
				//   resizable: true,
				// },
				// {
				//   title: '模具名称',
				//   key: "mmoldName",
				//   align: 'center',
				//   minWidth: 160,
				//   tooltip: true,
				//   resizable: true
				// },
				{
					title: `${this.$t('创建时间')}`,
					key: 'createTime',
					minWidth: 200,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
			],
			otherColumns: [
				{
					type: 'selection',
					align: 'center',
					width: 60,
				},
				{
					title: `${this.$t('设备等级')}`,
					key: 'categoryName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: `${this.$t('设备类别')}`,
					key: 'deviceType',
					minWidth: 180,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: `${this.$t('maintenance.EquipmentNo')}`,
					key: 'deviceNo',
					align: 'center',
					minWidth: 100,
					resizable: true,
					tooltip: true,
				},
				{
					title: `${this.$t('设备名称')}`,
					key: 'deviceName',
					align: 'center',
					minWidth: 100,
					resizable: true,
					tooltip: true,
				},
				{
					title: `${this.$t('设备流水号')}`,
					key: 'deviceMId',
					minWidth: 130,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
			],
			drawerData: [],
			deviceTypeList: [],
			deviceNameList: [],
			orgList: [],
			orgIdList: [],
			orgCodeList: [],
			materielNoList: [],
			deviceList: [],
		};
	},
	computed: {
		...mapGetters(['copyStatus']),
	},
	// watch: {
	//   mainDevice(newValue) {
	//     console.log(newValue)
	//   }
	// },
	watch: {
		addDevVisible: function (val) {
			if (val) {
			} else {
				if (this.current == 1) {
					this.customCacheKey = 'addMaintainPlanStep2';
					this.getColumnWidth(this.contentColumns);
				}
				if (this.current == 0) {
					this.customCacheKey = 'addMaintainPlanStep1';
					this.getColumnWidth(this.columns);
				}
			}
		},
		drawerVisible: function (val) {
			if (val) {
			} else {
				if (this.current == 1) {
					this.customCacheKey = 'addMaintainPlanStep2';
					this.getColumnWidth(this.contentColumns);
				}
				if (this.current == 0) {
					this.customCacheKey = 'addMaintainPlanStep1';
					this.getColumnWidth(this.columns);
				}
			}
		},
	},
	created() {
		this.getColumnWidth(this.columns);
		if (this.editId) {
			this.getPlanDetail(this.editId);
		}
		this.getOrgList();
	},
	mounted() {
		this.getFaultCategory('设备类型');
	},
	methods: {
		chosePeople() {
			this.$refs.signleCommonModal.show({}, 'more', this.confirmedBy);
		},
		handleRefresh(userIds, userName) {
			this.confirmedName = userName.join(',');
			this.confirmedBy = userIds.join(',');
		},
		handleCasChangeOne(val, selectedData) {
			this.searchParams.orgId = val[val.length - 1];
			// this.formItem.orgName = selectedData[selectedData.length - 1].label
		},
		handleRemote(query) {
			if (!query) {
				return;
			}
			const fn = this.debounceSerach(() => {
				let _query = query.split('-');
				if (Array.isArray(_query)) _query = _query[0];
				this.axios({
					method: 'get',
					url: '/dms/dmsDevice/deviceList',
					params: {
						deviceMId: _query,
						deviceNo: '',
						assetsNo: '',
						orgCode: this.searchParams.orgCode || '',
					},
				}).then((res) => {
					if (res.code === 200) {
						this.deviceMIdList = res.data.map((item) => {
							item.desc = item.deviceMId + '-' + item.deviceName + '-' + item.deviceNo;
							return item;
						});
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				});
			}, 300);
			fn();
		},
		handleCasChange(val) {
			this.searchPlanParams.orgCode = val[val.length - 1];
		},
		drawerchangePageNum(val) {
			this.drawerpageNum = val;
			this.searchPlanList();
		},
		drawerchangePageSize(pageSize) {
			this.drawerpageSize = pageSize;
			this.searchPlanList();
		},
		debounceSerach(fn, delay) {
			let _this = this;
			return function f(...args) {
				if (_this.timeID) {
					clearTimeout(_this.timeID);
				}
				_this.timeID = setTimeout(() => {
					fn(args);
				}, delay);
			};
		},
		materielNoChangeBom(val) {
			console.log(val);
		},
		materielNoChange(val, value) {
			// if (!val){
			//    return
			// }

			if (val && this.materielNoList.find((item) => item.materielNo + '-' + item.materielName === val)) {
				return;
			}

			const fn = this.debounceSerach(() => {
				const params = {
					deviceType: this.searchPlanParams.deviceType,
					param: val,
				};
				this.axios({
					method: 'post',
					// url: '/dms/applyUse/querySearch',
					url: '/dms/dmsBom/queryByDeviceTypeAndDeviceName',
					data: { ...params },
				}).then((res) => {
					if (res.code === 200) {
						if (res.data) {
							this.materielNoList = res.data;
						}
						if (value) {
							this.searchPlanParams.bomId = Number(value);
						}
					} else {
						this.$Message.warning({ content: res.msg, duration: 6, closable: true });
					}
				});
			}, 360);
			fn();
		},
		searchDevice(query) {
			let orgCode = '';
			if (this.searchParams.orgId) {
				orgCode = this.searchParams.orgId.at(-1);
			}

			this.axios({
				method: 'get',
				url: '/dms/dmsDevice/deviceListByParams',
				params: {
					orgCode: orgCode,
					param: query,
					deviceType: this.formInline.deviceType,
					categoryName: this.formInline.categoryName,
				},
			}).then((res) => {
				if (res.code === 200) {
					this.deviceList = res.data;
				}
			});
		},
		deviceTypeChange(val) {
			if (this.data && this.data.length) {
				this.data = [];
			}
			if (this.contentData && this.contentData.length) {
				this.contentData = [];
			}
			if (val) {
				this.formInline.deviceType = val;
			}
		},
		//获取故障数据
		getFaultCategory(name) {
			this.axios({
				method: 'get',
				url: '/dms/faultCategory/basicDict',
				params: { name },
			}).then((res) => {
				if (res.code === 200) {
					if (name === '故障分类') {
						this.faultCategoryList = res.data.map((item) => {
							if (item.value) return item;
						});
					} else if (name === '设备类型') {
						this.deviceTypeList = res.data.map((item) => {
							if (item.value) return item;
						});
					}
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		planNamechange(val) {
			this.formInline.planName = JSON.parse(JSON.stringify(val.target.value));
			localStorage.setItem('planNameInfo', JSON.stringify(val.target.value));
		},
		levelChange() {
			if (this.contentData && this.contentData.length) {
				this.contentData = [];
			}
		},
		deviceNameChange() {
			if (this.data && this.data.length) {
				this.data = [];
			}
			if (this.contentData && this.contentData.length) {
				this.contentData = [];
			}
		},
		triggerCycleChange(val) {
			// if (this.data && this.data.length) {
			//   this.data = []
			// }
			// if (this.contentData && this.contentData.length) {
			//   this.contentData = []
			// }
			if (!val) {
				return;
			}
			if (val == 8) {
				this.stepTwoValidate.maintainType = '3';
			} else {
				this.stepTwoValidate.maintainType = '1';
			}
			this.stepTwoValidate.triggerCycle = val;
		},
		categorySelectChange(categoryName) {
			if (this.data && this.data.length) {
				this.data = [];
			}
			if (this.contentData && this.contentData.length) {
				this.contentData = [];
			}
			if (categoryName) {
				return this.axios({
					method: 'get',
					url: '/dms/dcmMaintainItem/queryDeviceNames',
					params: {
						categoryName,
					},
				}).then((res) => {
					if (res.code == 200) {
						this.deviceNameList = res.data.map((val) => ({
							label: val,
							value: val,
						}));
					}
				});
			}
		},
		back() {
			this.$emit('handlePlanOk');
			// this.$emit("addMaintain", false);
		},
		getOrgList() {
			this.axios({
				method: 'get',
				url: '/basic/organization/findListByToken',
				params: {},
			}).then((res) => {
				if (res.code === 200) {
					const obj = {
						label: 'name',
						value: 'code',
						children: 'children',
					};
					this.orgList = recursion.convertTree(res.data, obj);
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		getPlanDetail(data) {
			this.axios({
				method: 'post',
				url: '/dms/servicingPlan/getByIdList',
				data: {
					id: data.id,
				},
			}).then(async (res) => {
				if (res.code === 200) {
					const { mmodList, itemList } = res.data;
					this.formInline = {
						...data,
					};
					this.contentData = itemList.map((item) => {
						return {
							itemProject: item.item,
							itemBase: item.itemBase,
							itemMethod: item.method,
							...item,
						};
					});
					this.data = mmodList.map((item) => {
						return {
							moldCode: item.mmoldCode,
							moldName: item.mmoldName,
							moldModel: item.moldModel,
							functionLocation: item.location,
						};
					});

					// this.effDetail = res.data
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		changePageSize(pageSize) {
			this.addDevpageParams.pageSize = pageSize;
			this.searchList();
		},
		changePageNum(val) {
			this.addDevpageParams.pageNum = val;
			this.searchList();
		},

		next() {
			if (this.current == 0) {
				//contentColumns
				this.customCacheKey = 'addMaintainPlanStep2';
				this.getColumnWidth(this.contentColumns);
				this.$refs['stepOneValidate'].validate((valid) => {
					if (valid) {
						if (!this.data.length) {
							this.$Message.warning({ content: '请添加保养模具！', duration: 6, closable: true });
							return false;
						}
						// 注视代码为校验是否重名
						if (!this.editId || this.copyStatus) {
							// this.axios({
							//   method: 'get',
							//   url: '/dms/dcmMaintainPlan/validPlanName',
							//   params: {
							//     planName: this.formInline.planName
							//   }
							// }).then(res => {
							//   if (res.code == 200) {
							//     this.current += 1;
							//   } else {
							//     this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
							//   }
							// })
							this.current += 1;
						} else {
							// this.axios({
							//   method: 'get',
							//   url: '/dms/dcmMaintainPlan/validPlanName',
							//   params: {
							//     id: this.editId,
							//     planName: this.formInline.planName
							//   }
							// }).then(res => {
							//   if (res.code == 200) {
							//     this.current += 1;
							//   } else {
							//     this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
							//   }
							// })
							this.current += 1;
						}
						// this.$Message.success('Success!');
					} else {
						// this.$Message.warning(({content: '请将信息填写完整！', duration: 6, closable: true}));
						return;
					}
				});
			} else if (this.current == 1) {
				if (!this.contentData.length) {
					this.$Message.warning({ content: '请添加保养内容！', duration: 6, closable: true });
					return false;
				}

				this.$refs['step2Validate'].validate((valid) => {
					if (valid) {
						this.customCacheKey = 'addMaintainPlanStep2';
						this.getColumnWidth(this.contentColumns);

						this.formInline.minVal = this.formInline.minVal ? this.formInline.minVal : 1;
						this.formInline.maxVal = this.formInline.maxVal ? this.formInline.maxVal : 1;
						if (this.formInline.servicingLevel == 1) {
							this.formInline.triggerCondition = '生产需要&任务完成';
						} else this.formInline.triggerCondition = '冲刺满保养';
						let hour = this.contentData.map((item) => item.unitTime).reduce((pre, current) => Number(pre) + Number(current));
						this.formInline.unitTime = hour;
						this.current += 1;
					}
				});
			} else {
				this.current += 1;
				this.customCacheKey = 'addMaintainPlanStep1';
				this.getColumnWidth(this.columns);
			}
		},
		previous() {
			this.current -= 1;
			if (this.current == 0) {
				this.customCacheKey = 'addMaintainPlanStep1';
				this.getColumnWidth(this.columns);
			}
			if (this.current == 0) {
				this.customCacheKey = 'addMaintainPlanStep2';
				this.getColumnWidth(this.contentColumns);
			}
		},
		create() {
			this.$refs.stepTwoValidate.validate((valid) => {
				if (valid) {
					const firstTimeinfo = new Date(this.formInline.firstTime).getTime();
					const nowTime = new Date().getTime();
					if (Number(firstTimeinfo) < Number(nowTime)) {
						this.$Message.warning({
							content: '首次生成时间必须大于当前时间！',
							duration: 6,
							closable: true,
						});
						return;
					}
					// let timeStamp = new Date(this.formInline.planEndTime).getTime() - new Date(this.formInline.firstTime).getTime()
					// let hour = Number(Number(timeStamp) / Number(1000 * 3600))
					// let tempDay = this.formInline.day ? this.stepTwoValidate.day : 0
					// let tempHour = this.formInline.hour ? this.formInline.hour : 0
					// let aliveHour = Number(tempDay * 24) + Number(tempHour)
					// let itemHour = Number(this.formInline.itemHour) / 60
					// if (Number(this.searchParams.triggerCycle) !== 7) {
					//   if (!this.formInline.day && !this.formInline.hour) {
					//     this.$Message.warning(({
					//       content: '请任意输入任务存活时间的天数或者小时！',
					//       duration: 6,
					//       closable: true
					//     }));
					//     return false
					//   }
					// }
					// if (new Date(this.formInline.firstTime).getTime() >= new Date(this.formInline.planEndTime).getTime()) {
					//   this.$Message.warning(({
					//     content: '首次生成时间不得大于计划截止时间！',
					//     duration: 6,
					//     closable: true
					//   }));
					//   return false
					// }
					// console.log('当前时间天数')
					// console.log(hour)
					// console.log(aliveHour)
					// if (hour <= aliveHour) {
					//   this.$Message.warning(({
					//     content: '计划截止时间与首次生成时间之差需超过任务存活时间！',
					//     duration: 6,
					//     closable: true
					//   }));
					//   return false
					// }
					// if (itemHour >= aliveHour) {
					//   this.$Message.warning(({content: '任务存活时间需超过标准工时！', duration: 6, closable: true}));
					//   return false
					// }
					this.loading = true;
					// let firstTime = this.$moment(this.formInline.firstTime).format('YYYY-MM-DD HH:mm:00')
					// let planEndTime = this.$moment(this.formInline.planEndTime).format('YYYY-MM-DD HH:mm:00')
					// // let effectiveHour = this.stepTwoValidate.day * 24 + this.stepTwoValidate.hour
					// let triggerCycle = this.formInline.maintainType == 1 ? this.formInline.triggerCycle : this.formInline.maintainType == 2 ? 7 : 8
					let mmodList = this.data.map((item) => {
						return {
							mmoldCode: item.moldCode,
							mmoldName: item.moldName,
							moldModel: item.moldModel,
							location: item.functionLocation,
						};
					});
					// 写你的妈一直改
					let itemList = this.contentData.map((item) => {
						return {
							item: item.itemProject,
							// method: item.unitName,
							itemBase: item.itemBase,
							method: item.itemMethod,
							...item,
						};
					});
					const planName = JSON.parse(localStorage.getItem('planNameInfo'));
					let data = {
						// itemLevel: this.stepTwoValidate.itemLevel,
						// deviceType: this.formInline.deviceType,
						// isConfirm: this.stepTwoValidate.isConfirm,
						// // planName: this.formInline.planName,
						// categoryName: this.formInline.categoryName,
						// maintainType: this.stepTwoValidate.maintainType,
						// intervalRate: this.stepTwoValidate.intervalRate,
						// triggerCycle,
						// pdays: this.stepTwoValidate.day,
						// phours: this.stepTwoValidate.hour,
						// firstTime,
						// planEndTime,
						// confirmedBy: this.confirmedBy,
						// dcmMaintainProjectList,
						// autoDistribution: this.stepTwoValidate.autoDistribution
						...this.formInline,
						mmodList,
						itemList,
					};
					if (planName) {
						data.planName = planName;
					}
					if (!this.editId || this.copyStatus) {
						this.axios({
							method: 'post',
							url: '/dms/servicingPlan/add',
							data,
						})
							.then((res) => {
								if (res.code === 200) {
									this.$emit('handlePlanOk');
									this.$Message.success({ content: '新增保养计划成功！', duration: 2, closable: true });
								} else {
									this.$Message.warning({ content: res.msg, duration: 6, closable: true });
								}
							})
							.finally(() => {
								this.loading = false;
							});
					} else {
						// let params = {
						//   ...data,
						//   id: this.editId.id
						// }
						this.axios({
							method: 'post',
							url: '/dms/servicingPlan/update',
							data,
						})
							.then((res) => {
								if (res.code === 200) {
									this.$emit('handlePlanOk');
									this.$Message.success({ content: '编辑保养计划成功！', duration: 2, closable: true });
								} else {
									this.$Message.warning({ content: res.msg, duration: 6, closable: true });
								}
							})
							.finally(() => {
								this.loading = false;
							});
					}
				} else {
					// this.$Message.warning(({content: '请将信息填写完整！', duration: 6, closable: true}));
					return;
				}
			});
		},
		addDev() {
			this.customCacheKey = 'addMaintainPlanAddDevice';
			this.getColumnWidth(this.addDevcolumns);

			// console.log( this.addDevcolumns)
			this.addDevcolumns.reverse().reverse();

			// if (!this.formInline.categoryName) {
			//   this.$Message.warning(({content: '请选择设备等级！', duration: 6, closable: true}))
			//   return
			// }
			// if (!this.formInline.deviceType) {
			//   this.$Message.warning(({content: '请选择设备类别！', duration: 6, closable: true}))
			//   return
			// }
			// if (!this.searchParams.itemLevel) {
			//   this.$Message.warning(({content: '请选择保养级别！', duration: 6, closable: true}))
			//   return
			// }
			// if (!this.searchParams.triggerCycle) {
			//   this.$Message.warning(({content: '请选择保养周期！', duration: 6, closable: true}))
			//   return
			// }
			this.addDevVisible = true;
			this.$forceUpdate();
			// this.searchParams = {}
			this.searchList();
		},
		handleSelectionChange(selectionData) {
			// console.log(selectionData)
			let arr = [...selectionData];
			this.selectData = arr;
		},
		addDevCancel() {
			this.addDevVisible = false;
			this.$refs.devSelection.selectAll(false);
		},
		addDevOk() {
			if (this.data.length) {
				// let arr = this.data.filter(item => this.selectData.some(x => x.id !== item.id))
				// console.log(arr)
				// if (arr.length) {
				//   this.$Message.warning(({ content: '有重复数据，请重新选择！1111', duration: 6, closable: true }));
				//   return false
				// }
				this.addDevVisible = false;
				this.data = this.concatArrAndOne(this.data, this.selectData, 'moldCode');
				this.$refs.devSelection.selectAll(false);
			} else {
				this.addDevVisible = false;
				this.data = [...this.data, ...this.selectData];
				this.$refs.devSelection.selectAll(false);
			}
		},
		//分页
		changeNum() {
			this.addDevpageParams.pageNum = 1;
			this.searchList();
		},
		searchList() {
			let data = {
				...this.searchParams,
				pageNum: this.addDevpageParams.pageNum,
				pageSize: this.addDevpageParams.pageSize,
				codeList:this.data.map(item=>item.moldCode)
			};
			if (data.functionalLocationName && data.functionalLocationName.length != 0) {
				data.functionalLocationName = [data.functionalLocationName.at(-1)];
			}
			this.axios({
				method: 'POST',
				url: '/dms/moldinfo/getDeviceTzList',
				data,
			}).then((res) => {
				if (res.code === 200) {
					this.addDevdata = res.data.records;
					this.addDevpageParams.total = res.data.total;
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		changePlanNum() {
			this.searchPlanList();
		},
		searchPlanList() {
			let data = {
				pageNum: this.drawerpageNum,
				pageSize: this.drawerpageSize,
				// triggerCycle: this.stepTwoValidate.maintainType ==1 ? this.stepTwoValidate.triggerCycle : this.stepTwoValidate.maintainType ==2 ? 7 : 8
				// categoryName: this.formInline.categoryName,
				itemProject: this.searchPlanParams.itemProject,
				// deviceType: this.formInline.deviceType,
				itemLevel: this.searchPlanParams.itemLevel,
				// triggerCycle: this.searchParams.triggerCycle,
				// pageNo:this.addDevpageParams.pageNum,
				// pageSize:this.addDevpageParams.pageSize,
			};
			// for (let key in this.searchPlanParams) {
			//   if (key === 'orgId' && this.searchPlanParams['orgId']) {
			//     const arr = this.searchPlanParams[key]
			//     const { length, last = length - 1 } = arr
			//     this.$set(data, key, arr[last])
			//   } else {
			//     if (this.searchPlanParams[key]) {
			//       this.$set(data, key, this.searchPlanParams[key])
			//     }
			//   }
			// }
			this.axios({
				method: 'POST',
				url: '/dms/servicingItem/getPage',
				data,
			}).then((res) => {
				if (res.code === 200) {
					this.drawerData = res.data.records;
					this.drawerTotal = res.data.total;
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		handleDrawerChange(data) {
			let arr = [];
			data.map((item) => {
				arr.push(item);
			});
			this.drawerSelectionData = arr;
		},
		addPlan() {
			this.customCacheKey = 'addMaintainPlanAddPlan';
			this.getColumnWidth(this.drawerColumns);

			// console.log( this.addDevcolumns)
			this.drawerColumns.reverse().reverse();
			this.searchPlanParams = {};
			this.drawerVisible = true;
			this.searchPlanList();
		},
		handleDrawerCancel() {
			this.drawerVisible = false;
			this.$refs.drawerSelection.selectAll(false);
		},
		handleDrawerOk() {
			if (this.contentData.length) {
				// let arr = this.contentData.filter(item => this.drawerSelectionData.some(x => x.id == item.id))
				// if (arr.length) {
				//   this.$Message.warning(({ content: '有重复数据，请重新选择！', duration: 6, closable: true }));
				//   return false
				// }
				this.drawerVisible = false;
				this.contentData = this.concatArrAndOne(this.contentData, this.drawerSelectionData, 'id');

				// this.contentData = [...this.contentData, ...this.drawerSelectionData]
				this.$refs.drawerSelection.selectAll(false);
			} else {
				this.drawerVisible = false;
				this.contentData = [...this.contentData, ...this.drawerSelectionData];
				this.$refs.drawerSelection.selectAll(false);
			}
		},
		seeDetail(row) {
			this.visible = true;
			this.getWlDetail(row.itemId || row.id);
		},
		getWlDetail(itemId) {
			this.axios({
				method: 'get',
				url: '/dms/dcmMaintainItem/queryById',
				params: {
					id: itemId,
				},
			}).then((res) => {
				if (res.code === 200) {
					this.formInline = {
						...res.data,
						planName: this.formInline.planName,
						triggerCycle: res.data.triggerCycle ? res.data.triggerCycle.split(',') : [],
						minValue: res.data.minValue ? Number(res.data.minValue) : '',
						maxValue: res.data.maxValue ? Number(res.data.maxValue) : '',
					};
					if (this.formInline.itemLevel) {
						this.formInline.itemLevel = this.levelList.find((val) => val.key === this.formInline.itemLevel).name;
					}
					// if (this.formInline.categoryName){
					//   this.categorySelectChange(this.formInline.categoryName)
					// }
					this.toolList = res.data.dcmMaintainToolList.map((item) => {
						return {
							...item,
							isEdit: false,
						};
					});
					this.materData = res.data.dcmMaintainMaterialList.map((item) => {
						return {
							...item,
							isEdit: false,
						};
					});

					// this.materialList = res.data.materialList
					// this.toolList = res.data.toolList
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		deleteRow(row) {
			this.contentData = this.contentData.filter((item) => item.id != row.id);
		},
		deleteDevRow(row) {
			this.data = this.data.filter((item) => item.moldCode != row.moldCode);
		},
	},
};
</script>

<style lang="scss">
.addMaintainPlan {
	background: #fff;

	.line-title {
		display: flex;
		justify-content: flex-start;
		font-size: 20px;
		padding: 10px;
		//border-bottom: 1px solid #dddddd;
		align-items: center;
		position: absolute;
		top: 3px;
		right: 0;

		.ivu-steps .ivu-steps-head,
		.ivu-steps-item.ivu-steps-status-process .ivu-steps-title {
			background: transparent;
		}

		.ivu-steps .ivu-steps-title {
			background: transparent;
			vertical-align: sub;
		}

		.back {
			color: #187bdb;
			font-size: 16px;
			padding-left: 20px;
			cursor: pointer;
		}

		.steps {
			width: 400px;
			margin-left: auto;
		}
	}

	.searchBox {
		.addDev {
			font-size: 16px;
			padding: 20px 0 0 10px;
		}

		.labelTop {
			display: flex;
			/*justify-content: space-between;*/
			border-bottom: 2px solid #d7d7d7;

			.item {
				width: 27%;
				margin: 0 10px 20px 10px;
			}
		}

		.label {
			display: flex;

			.item {
				margin-left: 10px;
			}
		}
	}

	.nextBtn {
		text-align: center;
		padding: 50px 0px;

		button {
			margin: 10px;
		}
	}
}

.second {
	.search-form {
		width: 30%;
	}
}

.third {
	.addPlan {
		font-size: 16px;
		padding: 20px 0 20px 10px;
	}
}

.addDevModal {
	.search-form {
		padding: 0;

		.label {
			display: flex;
		}
	}
}

.drawer {
	.search {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		button {
			margin: 20px 0 0 15px;
		}
	}

	.demo-drawer-footer {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 0 30px 15px 30px;
		//text-align: right;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
	}
}
</style>
